<template >
    <div class="fuel_remit_wraper" :class="[showKeyboard || showRemitPage ? 'active' : '']">
      <div class="fuel_remit_nav" @click="goFuelPage()">
        <div class="icon_fixed"></div>
        <div class="name">{{ stationName }}</div>
        <div class="icon_right"></div>
      </div>
      <div class="remit_container">
        <div class="oilGun_container">
          <div class="fuel_remit_top" :class="[showRemitPage ? 'active' : '']">
            <!-- 油枪信息 -->
            <div class="oilGun_info" @click="goOilGunSelect()">
              <div class="oilGun_title">油枪</div>
              <div class="oilGun_placeholder" v-if="!oilGunNum">请选择油枪号</div>
              <div class="oilGun_value" v-else>
                <span class="num">{{ oilGunNum }}</span>
                <span class="name">{{ oilGunName }}</span>
              </div>
              <div v-show="oilGunStatus && oilGunNum" class="oli_icon_close" @click="changeOilGunValue()"></div>
              <div class="price" v-show="showRemitPage && !!oilOfficialPrice">
                单价<span class="price_color">￥{{ oilOfficialPrice }}/L</span>
              </div>
            </div>
            <div class="divider_line" :class="[oilGunStatus ? 'active' : '']"></div>
            <!-- 金额 -->
            <div class="amount_of_money">
              <van-field v-model="priceValue" @click="onFocusField()" @focus="onFocusField()" ref="fieldRef" label="金额"
                class="field_price" :class="[!priceValue ? 'placeStyle' : '']" placeholder="加油金额(5-50000)">
                <template #button>
                  <div v-show="showKeyboard && !!priceValue" class="icon_close" @click="deletePrice()"></div>
                  <div class="discountAmt" v-show="CouponData.discountAmt > 0 && showRemitPage">
                    立减￥{{ verticalPrice }}
                  </div>
                </template>
              </van-field>
            </div>
            <!-- 推荐价格 -->
            <div class="divider_line input" :class="[showKeyboard ? 'active' : '']">
              <div class="price_list" v-show="showKeyboard && !priceValue">
                <div class="price_value" @click="priceChange(item)" v-for="(item, index) in priceList" :key="index">{{ item }}
                </div>
              </div>
            </div>
          </div>
          <!-- 选择油枪号 -->
          <div class="oilGun_main_wraper" v-show="oilGunStatus">
            <div class="oilGun_main_title">请选择油枪号</div>
            <div class="oilGun_main_content">
              <div class="main_card" :class="[oilGunNum === item.gunName ? 'active' : '']" v-for="item in staOilGunList"
                :key="item.oilId" @click="changeCard(item)">
                <div class="gunName">{{ item.gunName }}</div>
                <div class="oilName">{{ item.oil.oilName + item.oil.oilClass }}</div>
              </div>
            </div>
          </div>
          <!-- 优惠劵列表 -->
          <div class="coupon_info" v-show="showRemitPage">
            <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon"
              @click="clickCoupons((CouponData.couponList || []).length === 0)" />
          </div>
          <!-- 支付方式 -->
          <div class="remit_page_container" v-show="showRemitPage && !showCouponList">
            <div class="remit_page_wraper">
              <div class="stored_radio">
                <div class="stored_card">
                  <div class="icon stored"></div>
                  <div class="stored_title">储值卡</div>
                </div>
                <input type="radio" name="radios" value="1" @click="changeStoredVale()" v-model="radioParams">
              </div>
              <div class="stored_amt">卡余额{{ CouponData.balance || 0 }}</div>
              <div class="divider_line" :class="[oilGunStatus ? 'active' : '']"></div>
              <div class="stored_radio">
                <div class="stored_card">
                  <div class="icon vx"></div>
                  <div class="stored_title">微信支付</div>
                </div>
                <input type="radio" name="radios" value="2" @click="radioParams = '2'" v-model="radioParams">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 数字键盘 -->
      <van-number-keyboard :class="[Number(priceValue) >= 5 ? '' : 'disabold']" v-model="priceValue" :maxlength="6"
        :show="showKeyboard" theme="custom" close-button-text="确认" extra-key="." @input="$refs.fieldRef.blur();"
        @close=" onCloseKeyboard() " />
      <!-- 购物车 -->
      <van-popup v-model:show=" showBottom " position="bottom" closeable :style=" { height: '80%' } ">
        <div class="popup_container">
          <div class="title">购物车</div>
          <div class="popup_main">
            <div class="popup_name">油品</div>
            <div class="popup_price">
              <div class="tag">{{oilGunNum}}号油枪{{oilGunName}}</div>
              <div class="price">￥{{newPrice}}</div>
            </div>
            <!-- 优惠劵 -->
            <div v-show=" false " class="popup_preferential"></div>
          </div>
        </div>
      </van-popup>
      <!-- 优惠劵弹窗 -->
      <van-popup v-model:show=" showCouponList " closeable round position="bottom" style="height: 90%; padding-top: 4px;">
        <div class="coupons_popup_container">
          <div class="title">优惠劵</div>
          <div class="van_popup_main">
            <div class="popup_list" @click=" changeRadioCoupon(index) " v-for="( item, index ) in  coupons " :key=" item.id ">
              <div class="left_popup" :class=" [item.couponType === '1' ? '' : 'red'] ">
                <div class="valueDesc">{{item.valueDesc}}</div>
                <div class="condition">{{item.condition}}</div>
              </div>
              <div class="right_popup">
                <div class="name" :class=" [item.couponType === '1' ? '' : 'red'] ">{{item.name}}</div>
                <div class="time">截止：{{item.time}}</div>
              </div>
              <div class="radio">
                <input type="radio" name="couponsRadio" :value=" index " v-model=" radioCouponsValue ">
              </div>
            </div>
          </div>
        </div>
      </van-popup>
      <!-- 底部支付 -->
      <div class="bottom_fix_bar" v-show=" showRemitPage && !showCouponList ">
        <div class="car_container">
          <div class="icon_car" @click=" showBottom = !showBottom ">
            <van-icon name="cart-o" size=".6rem" badge="1" />
          </div>
          <div class="newPrice">
            <div class="price_bar">总计 <span class="price_value">￥{{newPrice}}</span></div>
            <div class="price_coupon" v-show=" !!couponPrice || CouponData.discountAmt > 0 ">优惠<span
                class="coupon_value">￥{{NewCouponPrice}}</span></div>
          </div>
        </div>
        <van-button @click=" submitRemit() " :disabled=" radioParams === '1' && newPrice > CouponData.balance " square
          type="primary">立即支付</van-button>
      </div>
    </div>
  </template>
  
  <script>
  import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
  import wx from "weixin-js-sdk";
  import Qr from "@/components/QrCode";
  import Vue from "vue";
  import { NumberKeyboard, Field, Icon, Popup, Toast, Button, CouponCell } from "vant";
  Vue.use(NumberKeyboard);
  Vue.use(Field);
  Vue.use(Icon);
  Vue.use(Popup);
  Vue.use(Toast);
  Vue.use(Button);
  Vue.use(CouponCell);
  
  export default {
    head() {
      return {
        title: "一键加油",
      };
    },
    data() {
      return {
        radioParams: '2',
        radioCouponsValue: '-1',
        showKeyboard: false, // 键盘显示
        showBottom: false, // 购物车
        showRemitPage: false, // 支付界面
        showCouponList: false, // 优惠劵
        staOilGunList: [],
        oilGunNum: '', // 油枪号
        oilGunName: '', // 油枪名字结合
        oilName: '', // 油枪名字
        oilClass: '', // 油枪类型
        oilId: '', // 油ID
        oilGunStatus: true, // 油枪状态
        priceValue: '', // 价格
        oilOfficialPrice: '', // 单价
        priceList: [100, 200, 300, 400],
        CouponData: {}, // 优惠劵信息
        chosenCoupon: -1, // 优惠劵索引
        couponPrice: '', // 优惠金额
        verticalPrice: '', // 立减
        couponNo: '', // 优惠劵编号
      };
    },
    components: {
      Qr: Qr,
    },
    computed: {
      coupons() {
        const { couponList = [] } = this.CouponData;
        return couponList.map(item => {
          // couponType  1现金券2折扣券 couponAmt 优惠金额 newAmtByCoupon: 优惠后的金额 issueName:发放方式名称
          // 如果 couponType 为2时 couponAmt 为折扣百分比 couponThresholdAmt  最低消费金额
          const couponAmt = item.couponType === '1' ? `${item.couponAmt} ￥` : `${item.couponAmt} %`;
          const value = item.couponType === '1' ? `${item.couponAmt * 100}` : `${(Number(this.priceValue) / item.couponAmt) * 100}`;
          return {
            ...item,
            id: item.couponId,
            condition: `满${item.couponThresholdAmt}元可用`,
            name: item.couponType === '1' ? '立减劵' : '折扣劵',
            time: item.couponEffectiveTime,
            valueDesc: couponAmt,
            value: Number(value),
          };
        });
      },
      newPrice() {
        if (!!this.couponPrice) {
          return (Number(this.priceValue) - this.couponPrice - this.verticalPrice).toFixed(2);
        }
        return Number(this.priceValue - this.verticalPrice).toFixed(2);
      },
      // 优惠总价格
      NewCouponPrice() {
        if (!!this.couponPrice) {
          return (Number(this.couponPrice) + this.verticalPrice).toFixed(2);
        }
        return (this.verticalPrice || 0).toFixed(2);
      }
    },
    created() {
      this.stationId = this.$route.query.stationId;
      this.userId = this.$route.query.userId;
      this.stationName = this.$route.query.stationName;
      this.init();
    },
    methods: {
  
      init() {
        // 获取油站信息列表
        this.$axios
          .$get("/selectStaOilGunList", {
            params: {
              stationId: this.stationId,
              userId: this.userId
            },
          })
          .then((res) => {
            if (res.retCode != 0) {
              throw new Error("获取油站失败")
            }
            this.staOilGunList = res.data.staOilGunList || [];
          })
          .catch((err) => {
            alert(err);
          });
      },
  
      // 改变油站卡片
      changeCard(item) {
        this.oilGunNum = item.gunName;
        this.oilGunName = item.oil.oilName + item.oil.oilClass;
        this.oilName = item.oil.oilName;
        this.oilClass = item.oil.oilClass;
        this.oilId = item.oilId;
        this.oilOfficialPrice = item.oilStationPrice;
        this.oilGunStatus = false;
        this.$refs.fieldRef.focus();
        this.showRemitPage = false;
      },
  
      // 删除金额
      deletePrice() {
        this.priceValue = '';
      },
  
      // 删除油枪
      changeOilGunValue() {
        this.oilGunNum = '';
        this.oilGunName = '';
        this.oilName = '';
        this.oilClass = '';
        this.oilId = '';
        this.oilOfficialPrice = '';
      },
  
      // 点击价格列表
      priceChange(item) {
        this.priceValue = item;
        this.$refs.fieldRef.blur();
        this.showKeyboard = false;
        this.showRemitPage = true;
        this.radioParams = '2';
        this.getPayInfo();
      },
  
      clickCoupons(status) {
        if (status) {
          return;
        }
        this.showCouponList = true;
      },
  
      // 点击优惠劵
      changeRadioCoupon(index) {
        this.chosenCoupon = index;
        this.showCouponList = false;
        this.radioCouponsValue = index;
        this.couponPrice = (this.coupons[index].value / 100).toFixed(2);
        this.couponNo = this.coupons[index].couponNo;
        this.updateOrderByCoupon()
      },
  
      // 调取优惠劵订单
      updateOrderByCoupon() {
        this.verticalPrice = ''
        const { oilGunNum, phone, openId, stationId, newPrice, oilId, couponNo } = this;
        const { ordNo } = this.CouponData;
        this.$axios.$post("/updateOrderByCoupon", {
          aliUserId: '1',
          appType: '1',
          cardFlag: '1',
          gunName: oilGunNum,
          mobilePhone: phone,
          oilId,
          openId: openId,
          couponNo,
          orderNo: ordNo,
          payType: 'wx',
          receivableAmt: newPrice,
          stationId,
          version: '1.0',
        }).then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.ordNo = res.data.ordNo;
            this.verticalPrice = res.data.discountAmt || 0;
          } else {
            this.radioParams = '2';
            throw new Error("储值卡无法交易")
          }
        }).catch(function (error) {
          Toast({
            message: '确认订单信息失败，请重试',
          });
          console.log(error);
        })
      },
      // 点击储值卡
      changeStoredVale() {
        this.radioParams = '1';
        this.updateOrderByCoupon();
      },
  
      // 回到选择油枪的页面
      goOilGunSelect() {
        this.oilGunStatus = true;
        this.showKeyboard = false;
        this.showRemitPage = false;
      },
  
      // 返回上一页
      goFuelPage() {
        this.$router.replace({ path: `/${this.enterpriseId}/fuel` })
        this.$router.go(-1)
      },
  
      // 确认金额
      onCloseKeyboard() {
        if (Number(this.priceValue) < 5) {
          return;
        }
        this.getPayInfo();
        this.$refs.fieldRef.blur();
        this.showKeyboard = false;
        this.showRemitPage = true;
        this.radioParams = '2';
      },
  
      // 获取订单信息
      getPayInfo() {
        this.verticalPrice = ''
        this.couponPrice = ''
        this.chosenCoupon = -1
        const { oilGunNum, phone, openId, stationId, newPrice } = this;
        this.$axios.$post("/createOrder", {
          aliUserId: '1',
          appType: '1',
          cardFlag: '1',
          gunName: oilGunNum,
          mobilePhone: phone,
          newCreatefalg: '1',
          openId: openId,
          orderOriginType: '2',
          payType: 'wx',
          receivableAmt: newPrice,
          stationId,
          version: '1.0',
          userId: this.userId
        }).then(res => {
          if (res.retCode == 0) {
            this.CouponData = res.data || {};
            this.verticalPrice = res.data.discountAmt || 0;
          }
        }).catch(function (error) {
          Toast({
            message: '确认订单信息失败，请重试',
          });
          console.log(error);
        })
      },
  
      // input获取焦点
      onFocusField() {
        if (!this.oilGunNum || !this.oilGunName) {
          this.$refs.fieldRef.blur();
          return;
        }
        // 不调动手机键盘
        this.$refs.fieldRef.blur();
        this.oilGunStatus = false;
        this.showKeyboard = true;
        this.showRemitPage = false;
      },
  
      // 支付
      submitRemit() {
        const _this = this;
        const { openId, stationId } = this;
        const { ordNo } = this.CouponData;
        if (this.radioParams === '2') {
          //根据接口返回的数据，在微信内拉起公众号支付，进行付款操作
          let data = {
            aliUserId: '1',
            newCouponFalg: '1',
            openId,
            ordNo,
            stationId,
          }
          let payUrl = '/toThirdPayV2';
          this.$axios.post(payUrl, data)
            .then(function (response) {
              if (response.data.retCode === 0) {
                const data = response.data.data;
                WeixinJSBridge.invoke(
                  "getBrandWCPayRequest", {
                  appId: data.payAppId,
                  timeStamp: data.payTimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                  nonceStr: data.paynonceStr, // 支付签名随机串，不长于 32
                  package: data.payPackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                  signType: data.paySignType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                  paySign: data.paySign, // 支付签名
                },
                  function (res) {
  
                    if (res.err_msg === "get_brand_wcpay_request:ok") {
                      // 使用以上方式判断前端返回,微信团队郑重提示：
                      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                      Toast('支付成功');
                      _this.$router.replace({ path: `/${_this.enterpriseId}/fuel/success?ordNo=${ordNo}` })
                    } else {
                      _this.goOilGunSelect();
                      Toast('支付失败，请重试');
                    }
                  })
                // })
              } else {
                _this.goOilGunSelect();
                Toast({
                  message: '获取支付信息失败，请重试',
                });
              }
            }).catch(function (error) {
              _this.goOilGunSelect();
              Toast({
                message: '获取下单信息失败，请重试',
              });
              console.log(error);
            });
        } else if (_this.radioParams === '1') {
          _this.$axios
            .$get("/newDzkCouponPaySetV3", {
              params: { ordNo },
            })
            .then((res) => {
              if (res.retCode != 0) {
                _this.goOilGunSelect();
                throw new Error("储值卡支付失败")
              } else {
                Toast('支付成功');
                _this.$router.replace({ path: `/${_this.enterpriseId}/fuel/success?ordNo=${ordNo}` })
              }
            })
            .catch((err) => {
              _this.goOilGunSelect();
              alert(err);
            });
        } else {
          _this.goOilGunSelect();
          return;
        }
      },
    },
  };
  </script>
  
  <style lang="scss" >
  .fuel_remit_wraper {
    box-sizing: border-box;
    min-height: 100vh;
    background-color: #f5f6f7;
  
    &.active {
      background-color: #fff;
    }
  
    .fuel_remit_nav {
      display: flex;
      align-items: center;
      padding: 0.16rem 0.32rem;
      background-color: #fff;
  
      .icon_fixed {
        width: 0.32rem;
        height: 0.32rem;
        background: url("../../../static/fuel/fixed.png") no-repeat 0 0;
        background-size: 100% 100%;
      }
  
      .name {
        font-size: 0.28rem;
      }
  
      .icon_right {
        width: 0.32rem;
        height: 0.32rem;
        background: url("../../../static/fuel/right.png") no-repeat 0 0;
        background-size: 100% 100%;
      }
    }
  
    .van-number-keyboard {
      &.disabold .van-key--blue {
        background-color: #EAEAEA;
      }
    }
  
    .remit_container {
      .oilGun_container {
        .fuel_remit_top {
          padding: .24rem .24rem 1rem;
          box-sizing: border-box;
          width: 100%;
          background-color: #fff;
  
          &.active {
            padding-bottom: .2rem;
          }
  
          .oilGun_info {
            display: flex;
            align-items: center;
            height: .52rem;
  
            .oilGun_title {
              font-size: .32rem;
              font-weight: 500;
              margin-right: .32rem;
            }
  
            .oilGun_placeholder {
              color: #AEAEAE;
              font-size: .28rem;
              font-weight: 500;
            }
  
            .oli_icon_close {
              width: 0.28rem;
              height: 0.28rem;
              background: url("../../../static/fuel/close.png") no-repeat 0 0;
              background-size: 100% 100%;
              position: absolute;
              right: .24rem;
            }
  
            .oilGun_value {
              .num {
                font-size: .4rem;
                font-weight: 600;
                margin-right: .16rem;
              }
  
              .name {
                font-size: .28rem;
                color: #34B053;
              }
            }
  
            .price {
              color: #666;
              font-size: .24rem;
              position: absolute;
              right: .24rem;
  
              .price_color {
                color: #86CA96;
              }
            }
          }
  
          .divider_line {
            position: relative;
            width: 100%;
            height: 1px;
            margin: .16rem 0;
            background-color: #F5F5F5;
  
            &.active {
              background-color: #98CDA7;
            }
  
            &.input {
              margin: 0;
  
              .price_list {
                position: absolute;
                top: .1rem;
                display: flex;
  
                .price_value {
                  width: 1.64rem;
                  text-align: center;
                  height: .7rem;
                  line-height: .7rem;
                  font-size: .26rem;
                  background-color: #fff;
                  border: 1px solid #F6F6F6;
                  margin-right: .1rem;
                  border-radius: .16rem;
  
                  &:nth-child(4n) {
                    margin-right: 0;
                  }
                }
              }
  
              &.active {
                background-color: #98CDA7;
              }
            }
          }
  
          .amount_of_money {
            .field_price {
              padding: .35rem 0 .2rem;
  
              &.placeStyle .van-field__body input {
                font-size: .32rem;
                font-weight: 400;
              }
  
              .icon_close {
                width: 0.28rem;
                height: 0.28rem;
                background: url("../../../static/fuel/close.png") no-repeat 0 0;
                background-size: 100% 100%;
              }
  
              .van-field__body {
                input {
                  font-size: .4rem;
                  font-weight: 600;
                }
              }
  
              .discountAmt {
                font-size: 0.28rem;
                color: #32AF51;
              }
  
              .van-field__label {
                color: #333;
                font-size: .32rem;
                font-weight: 500;
                width: auto;
                margin-right: .32rem;
              }
            }
          }
        }
  
        .oilGun_main_wraper {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0 .24rem;
  
          .oilGun_main_title {
            height: 1.1rem;
            line-height: 1.1rem;
            font-size: .28rem;
            font-weight: 600;
          }
  
          .oilGun_main_content {
            display: flex;
            flex-wrap: wrap;
  
            .main_card {
              width: 1.64rem;
              height: 1.64rem;
              background-color: #fff;
              margin: 0 .15rem .16rem 0;
              border-radius: .16rem;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
  
              &.active {
                background-color: #34B053;
                opacity: .8;
  
                .gunName {
                  color: #FFF;
                }
  
                .oilName {
                  color: #FFF;
                }
              }
  
              &:nth-child(4n) {
                margin: 0 0 .08rem 0;
              }
  
              .gunName {
                font-size: .36rem;
                font-weight: 600;
                color: #333;
                margin-bottom: .1rem;
              }
  
              .oilName {
                font-size: .24rem;
                color: #32AF51;
              }
            }
          }
        }
  
        .remit_page_container {
          background-color: #fff;
          padding: 0 .24rem;
  
          .remit_page_wraper {
            padding: .32rem .28rem .4rem;
            background-color: #F6F6F6;
            border-radius: .2rem;
  
            .stored_radio {
              display: flex;
              justify-content: space-between;
  
              .stored_card {
                display: flex;
                align-items: center;
                font-size: .32rem;
                font-weight: 600;
                color: #333;
                margin-left: .16rem;
  
                .icon {
                  width: 0.4rem;
                  height: 0.4rem;
                  margin-right: .16rem;
  
                  &.stored {
                    background: url("../../../static/vip/a1.svg") no-repeat 0 0;
                    background-size: 100% 100%;
                  }
  
                  &.vx {
                    background: url("../../../static/fuel/vx_remit.png") no-repeat 0 0;
                    background-size: 100% 100%;
                  }
                }
              }
            }
  
            .stored_amt {
              font-size: 0.24rem;
              color: #999;
              padding: 0.2rem;
            }
  
            .divider_line {
              width: 100%;
              height: 1px;
              margin: .16rem 0;
              background-color: #EEE;
            }
          }
        }
      }
    }
  
    .bottom_fix_bar {
      z-index: 9999;
      width: 100%;
      position: fixed;
      background-color: #fff;
      bottom: 0;
      display: flex;
      justify-content: space-between;
  
      .car_container {
        display: flex;
        align-items: center;
        flex: 1;
        border-top: 1px solid #EEE;
  
        .icon_car {
          width: 0.6rem;
          height: 0.4rem;
          margin-right: .3rem;
          margin-left: .36rem;
  
          .van-info {
            background-color: #32AF51;
          }
        }
  
        .price_bar {
          font-size: 0.28rem;
  
          .price_value {
            font-size: 0.32rem;
            font-weight: 600;
          }
        }
  
        .price_coupon {
          font-size: 0.28rem;
          font-weight: 500;
  
          .coupon_value {
            color: #32AF51;
          }
        }
      }
    }
  
    .popup_container {
      .title {
        width: 100%;
        text-align: center;
        height: 1.5rem;
        line-height: 1.5rem;
        font-size: 0.36rem;
        font-weight: 600;
      }
  
      .popup_main {
        .popup_name {
          box-sizing: border-box;
          padding: 0 0.2rem;
          width: 100%;
          background-color: #f5f6f7;
          height: 0.8rem;
          line-height: 0.8rem;
        }
  
        .popup_price {
          box-sizing: border-box;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 0.8rem;
          padding: 0 0.2rem;
  
          .tag {
            color: #666;
          }
  
          .price {
            color: #666;
          }
        }
  
        .popup_preferential {}
      }
    }
  
    .coupons_popup_container {
      .title {
        width: 100%;
        text-align: center;
        height: 1.1rem;
        line-height: 1.1rem;
        font-size: 0.36rem;
        font-weight: 600;
      }
  
      .van_popup_main {
        .popup_list {
          box-sizing: border-box;
          padding: .3rem;
          margin: 0.3rem;
          background-color: #f5f6f7;
          border-radius: 0.16rem;
          display: flex;
  
          .left_popup {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 2.2rem;
            height: 1.7rem;
            background: url("../../../static/coupon/quan1.2x.png") no-repeat 0 0;
            background-size: 100% 100%;
            color: #fff;
            margin-right: 8px;
  
            .valueDesc {
              font-size: 0.4rem;
              margin-bottom: 0.32rem;
            }
  
            .condition {
              font-size: 0.28rem;
            }
  
            &.red {
              background: url("../../../static/coupon/quan2.2x.png") no-repeat 0 0;
              background-size: 100% 100%;
            }
          }
  
          .right_popup {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
  
            .name {
              width: 1.5rem;
              text-align: center;
              height: 0.6rem;
              line-height: 0.6rem;
              background-color: #fad25e;
              border-radius: 0.6rem;
  
              &.red {
                background-color: #ed9381;
              }
            }
  
            .title {}
          }
  
          .radio {
            position: absolute;
            right: 0.32rem;
  
            input {
              zoom: 1.5;
            }
          }
        }
      }
    }
  }</style>
  